<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="body">
    <div class="align">
        <div><span>Learner Platform</span></div>
    </div>
    <div class="context">
        <p>
            <span th:text="${username} == null ? '用户': ${username}">用户</span>， 您好！
        </p>
        <p>
            <span th:text="${platform}==null?'learner platform':${platform}">learner platform</span> 已为您创建账户。请在30天内点击下方链接激活账户。
        </p>
        <div class="align">
            <a class="button" href="https://www.baidu.com">激活您的账户</a>
        </div>
        <p>
            <span>Learner Platform开发者</span>
        </p>
    </div>
</div>
<style>
    body{
        background-color: azure;
    }
    .body{
        width: 600px;
        margin: auto;
    }
    .align{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .align div{
        border-radius: 5px;
        padding: 10px;
        color: #fef;
        font-size: 20px;
        font-weight: 600;
        background-color: cornflowerblue;
    }
    .context{
        background-color: #fefefe;
        padding: 20px;
        margin: 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    .button{
        border: 0;
        padding: 16px;
        color: #fefefe;
        /*font-weight: 60;*/
        font-size: 16px;
        background-color: cornflowerblue;
    }
</style>
</body>
</html>